function $(selector){
	return document.querySelector(selector);
}


(function(window){

	function Tree(obj, node){
		if(node === undefined)
			node = this.node();
		this.root = node;
		this.render(obj, node);
	}

	Tree.prototype = {
		constructor: Tree,
		flag: false,
		jump: false,
		active: null,
		node: function(){//如果没有跟节点，就创建一个
			var root = document.createElement('ul');
			root.className = 'root';
			document.body.appendChild(root);
			return root;
		},
		render: function(obj, node){
			if(obj && obj.length){
				for(var i in obj){
					var li = document.createElement('li');
					var text = '<span class="item">' + obj[i].value + '</span><span class="iconfont icon-tianjia"></span><span class="iconfont icon-shanchu"></span><ul></ul>';
					li.innerHTML = text;
					node.appendChild(li);
					this.render(obj[i].childs, li.getElementsByTagName('ul')[0]);
				}
			}
		},
		add_del: function(e){
			var e = e || window.event;
			var a =  $('.icon-shanchu').className;
			var b =  e.target.className;
			var c = e.target == b;
			if(e.target.className === $('.icon-shanchu').className){
				e.target.parentNode.parentNode.removeChild(e.target.parentNode);
			}
			if(e.target.className === $('.icon-tianjia').className){
				var li = document.createElement('li');
				li.innerHTML = '<input type="text"><button type="button">确认</button>';
				e.target.parentNode.lastChild.appendChild(li);
				e.target.parentNode.getElementsByTagName('ul')[0].lastChild.children[0].focus();
			}
			if(e.target.nodeName.toLowerCase() === 'button'){
				var value = e.target.parentNode.getElementsByTagName('input')[0].value.trim();
				if(value){
					var text = '<span class="item">' + value + '</span><span class="iconfont icon-tianjia"></span><span class="iconfont icon-shanchu"></span><ul></ul>';
					var li = document.createElement('li');
					li.innerHTML = text;
					e.target.parentNode.parentNode.replaceChild(li, e.target.parentNode);
				}
			}
			if(e.target === e.target.parentNode.children[0]){
				e.target.className = e.target.className == 'item' ? 'item-close' : 'item';
				if(e.target.className === 'item-close'){
					e.target.parentNode.children[3].style.display = 'none';
				}else{
					e.target.parentNode.children[3].style.display = 'block';
				}
			}
		},
		search: function(e, node){
			if(node === undefined){
				node = this.root;
				this.flag = false;
				this.jump = false;
			}
			// var a = this.active.style.backgroundColor == 'rgb(142, 175, 44)';
			if(this.active && this.active.style.backgroundColor == 'rgb(142, 175, 44)'){
				if(this.value != this.active.innerHTML){
					this.active.style.backgroundColor = '#fff';
				}
			}
			
			if(this.value){
				if(node.children.length){
					for(var i in node.children){
						if(node.children[i].children[0].innerHTML == this.value){
							node.children[i].children[0].style.backgroundColor = 'rgb(142, 175, 44)';
							node.children[i].children[0].className = 'item';
							node.children[i].children[3].style.display = 'block';
							this.active = node.children[i].children[0];
							this.flag = true;
							this.jump = true;
							this.value = '';
							return;
						}else{
							this.search(e, node.children[i].children[3]);
						}
						if(this.jump){
							break;
						}
					}
				}
			}else{
				this.value = e.target.previousSibling.value.trim();
				this.search(e);
			}
		},
		init: function(){
			this.root.onclick = this.add_del;
			(function(self){
				$('.btn').onclick = function(e){
					var e = e || window.event;
					self.search.call(self, e);
				};
			})(this);
		},
	};

	window.Tree = Tree;
})(window);

var obj = [{
	value: '国家',
	childs: [
		{
			value: '中国',
			childs: [
				{
					value: '湖南',
					childs: null
				},
				{
					value: '山东',
					childs: null
				}
			]
		},
		{
			value: '美国',
			childs: null
		}
	]
}];
console.log(obj);
var tree = new window.Tree(obj);
tree.init();

